<template>
	<view>
		<view class="pageone">
			<view class="tarbox">
				<logo pattern="1" :text="$t('HK')"></logo>
				<!-- <text class="stockname">{{$t("company.xiaomi-tech")}}</text> -->
				<text class="stockname">{{$getLocaleField(info, 'company_name')}}</text>
				<text class="stockcode">（{{info.symbol}}.{{info.location}}）</text>
				<!-- <image class="blueback" src="../../static/blue_back.png"></image> -->
			</view>
			<view class="xuxian" style="border-bottom: dashed 4rpx; color: #e8e8e8;"></view>
			<view>
				<!-- <view class="infolist">
					<view class="info">
						<text class="issuename">发行简称</text>
						<text class="xiaomied">{{$t("company.xiaomi-tech")}}</text>
					</view>
					<view class="info">
						<text class="issuename">正股代码</text>
						<text class="xiaomi">01801.KH</text>
					</view>
				</view> -->
				<!-- <view class="infolist">
					<view class="info">
						<text class="issuename">正股代码</text>
						<text class="xiaomied">81810.KH</text>
					</view>
					<view class="info">
						<text class="issuename">认购方式</text>
						<text class="xiaomi">融资认购</text>
					</view>
				</view> -->
			</view>
			<view class="steplist">
				<view class="step-item" :class="stepNum>=1?'active':''">
					<view class="steps">
						1
					</view>
				</view>
				<view class="step-item" :class="stepNum>=2?'active':''">
					<view class="steps">
						2
					</view>
				</view>
				<view class="step-item" :class="stepNum>=3?'active':''">
					<view class="steps">
						3
					</view>
				</view>
				<view class="step-item" :class="stepNum>=4?'active':''">
					<view class="steps">
						4
					</view>
				</view>
			</view>
			<view class="wordlist">
				<view class="words">
					<view class="stepsoneword">{{$t("new-certification.opening")}}</view>
					<view class="stepstwoword">{{info.application_start_date_time}}</view>
				</view>
				<view class="words">
					<view class="stepsoneword">{{$t("new-certification.exp-closing")}}</view>
					<view class="stepstwoword">{{info.application_end_date_time}}</view>
				</view>
				<view class="words">
					<view class="stepsoneword">{{$t("new-certification.result-annc")}}</view>
					<view class="stepstwoword">{{info.allotment_result_date}}</view>
				</view>
				<view class="words">
					<view class="stepsoneword">{{$t("new-certification.exp-listing")}}</view>
					<view class="stepstwoword">{{info.listing_date}}</view>
				</view>
			</view>
			<view class="xuxian" style="border-bottom: dashed 4rpx; color: #e8e8e8;"></view>
			
			<block v-if="is_to_be_list">
				<view class="stockinfolist" @tap="toZhaoGuUrl">
					<text class="stockinfowordone">{{$t("new-certification.prospectus")}}</text>
					<text class="dianjichakan">{{$t('view')}}</text>
				</view>
				<view class="stockinfolist">
					<text class="stockinfowordone">{{$t("new-certification.issue-price-range")}}</text>
					<text class="stockinfowordtwo">
						<!-- <text v-for="(price_item,price_index) in info.IssuingPriceRange" :key='price_index'>
							{{price_index>0?'~':''}}{{price_item}}
						</text> -->
						<text>{{info.low_price_range}}</text>
						<text v-if="info.high_price_range">~{{info.high_price_range}}</text>
						({{info.currency}})
					</text>
				</view>
				<view class="stockinfolist">
					<text class="stockinfowordone">{{$t("new-certification.issue-price-two")}}</text>
					<!-- <text class="stockinfowordtwo">{{info.IssuePrice.toLocaleString()}}</text> -->
					<text class="stockinfowordtwo">-</text>
				</view>
				<view class="stockinfolist">
					<text class="stockinfowordone">{{$t("new-certification.min-qty-for-subs")}}</text>
					<text class="stockinfowordtwo">{{info.min_order_size.toLocaleString()}}</text>
				</view>
				<view class="stockinfolist">
					<text class="stockinfowordone">{{$t("new-certification.min-amount")}}</text>
					<text class="stockinfowordtwo">{{info.minimal_sub_amount.toLocaleString()}}</text>
				</view>
				<view class="stockinfolist">
					<text class="stockinfowordone">{{$t("new-certification.exp-offering-size-two")}}</text>
					<text class="stockinfowordtwo">{{info.expected_offering_size.toLocaleString()}}</text>
				</view>
				<view class="stockinfolist">
					<text class="stockinfowordone">{{$t("new-certification.exp-mmarket-cap")}}</text>
					<text class="stockinfowordtwo">{{info.exp_market_cap.toLocaleString()}}</text>
				</view>
				<view class="stockinfolist">
					<text class="stockinfowordone">{{$t("new-certification.industry")}}</text>
					<text class="stockinfowordtwo">{{info.industry || '-'}}</text>
					<text class="stockinfowordtwo">-</text>
				</view>
				<view class="stockinfolist">
					<text class="stockinfowordone">{{$t("new-certification.green-shoe")}}</text>
					<!-- <text class="stockinfowordtwo">{{$t(info.GreenShoe)}}</text> -->
					<text class="stockinfowordtwo">-</text>
				</view>
				<view class="stockinfolist">
					<text class="stockinfowordone">{{$t("new-certification.use-of-funds")}}</text>
					<!-- <text class="stockinfowordtwo">{{info.UseOfFunds}}</text> -->
					<text class="stockinfowordtwo">-</text>
				</view>
			</block>
			<block v-else>
				<view class="stockinfolist" @tap="toZhaoGuUrl">
					<text class="stockinfowordone">{{$t("new-certification.prospectus")}}</text>
					<text class="dianjichakan">{{$t('view')}}</text>
				</view>
				<view class="stockinfolist">
					<text class="stockinfowordone">{{$t("new-certification.issue-price")}}</text>
					<text class="stockinfowordtwo">
						<!-- <text v-for="(price_item,price_index) in info.IssuingPriceRange" :key='price_index'>
							{{price_index>0?'~':''}}{{price_item}}
						</text> -->
						<text>{{info.low_price_range}}</text>
						<text v-if="info.high_price_range">~{{info.high_price_range}}</text>
						({{info.currency}})
					</text>
				</view>
				<view class="stockinfolist">
					<text class="stockinfowordone">{{$t("new-certification.min-qty-for-subs")}}</text>
					<text class="stockinfowordtwo">{{info.min_order_size.toLocaleString()}}</text>
				</view>
				<view class="stockinfolist">
					<text class="stockinfowordone">{{$t("new-certification.min-amount")}}</text>
					<!-- // 入场费 -->
					<!-- <text class="stockinfowordtwo">{{info.minimal_sub_amount.toLocaleString()}}</text> -->
					<text class="stockinfowordtwo">{{rcf.toLocaleString()}}</text>
					
				</view>
				<view class="stockinfolist">
					<text class="stockinfowordone">{{$t("new-certification.margin-rate")}}</text>
					<!-- // 入场费 -->
					<!-- <text class="stockinfowordtwo">{{info.minimal_sub_amount.toLocaleString()}}</text> -->
					<text class="stockinfowordtwo">{{(1 / info.margin_rate).toFixed(2)}}{{$t('bei')}}</text>
					
				</view>
				<view class="stockinfolist">
					<text class="stockinfowordone">{{$t("new-certification.exp-offering-size")}}</text>
					<text class="stockinfowordtwo">
						{{info.expected_offering_size.toLocaleString()}}{{$t('shares')}}
						<!-- <block v-if="$getLocale()=='zh-Hans'">1.50亿股</block>
						<block v-else>150.00M</block> -->
					</text>
				</view>
				<view class="stockinfolist">
					<text class="stockinfowordone">{{$t("new-certification.exp-listing-date")}}</text>
					<text class="stockinfowordtwo">{{$timeToStr(info.listing_date)}}</text>
				</view>
				<view class="stockinfolist">
					<text class="stockinfowordone">{{$t("new-certification.lead-underwriter")}}</text>
					<text class="stockinfowordtwo">
						<!-- <text v-for="(lead_item,lead_index) in info.LeadUnderwriter" :key='lead_index'>
							{{lead_index>0?'，':''}}{{lead_item}}
						</text> -->
						{{$getLocaleField(info, 'underwriter')}}
						
					</text>
				</view>
				<!-- <view class="stockinfolist">
					<text class="stockinfowordone">最低申购数量</text>
					<text class="stockinfowordtwo">200</text>
				</view>
				<view class="stockinfolist">
					<text class="stockinfowordone">申购截止时间</text>
					<text class="stockinfowordtwo">11-20 04:50</text>
				</view>
				<view class="stockinfolist">
					<text class="stockinfowordone">预计上市时间</text>
					<text class="stockinfowordtwo">11-26</text>
				</view> -->
				<view style="border-bottom: dashed 4rpx; color: #e8e8e8; margin-top: 30rpx;"></view>
				<view class="tip">{{$t('new-certification.special-notice')}}</view>
				<view class="tipinfo">{{$t('new-certification.special-notice-text')}}</view>
			</block>
		</view>
		<view>
			<wzh-btn v-if="!is_to_be_list && !info.is_end" pattern="5"
			  :text="$t('new-certification.next')"
			  @invokeBtn="invokeBtn()"></wzh-btn>
		</view>
		<view style="height: 85rpx;"></view>
		
		<tooltips-msg ref="message" :closeBtn="true" 
			:confirmText="$t('new-certification.show')" 
			:closeText="$t('new-certification.no_show')"></tooltips-msg>
		<tooltips-msg ref="msg" ></tooltips-msg>
		
		
		<tooltips-msg ref="account">
			<view class="message-box">
				<view v-for="(item, index) in account_list" :key="index"
					class="account-item" 
					:class="{acctive:(account_id == item)}"
					@tap="changAcctive(item)"
				>{{item}}</view>
			</view>
		</tooltips-msg>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0,
				info: {
					min_order_size:0,
					minimal_sub_amount:0,
					expected_offering_size:0,
					exp_market_cap: 0,
					StockStatus:'1'
				},
				rcf: 0, // 入场费
				stepNum: 1,
				
				is_to_be_list: 1,
				account_id: '',
				account_list: []
			}
		},
		onShow() {
			this.showNotice()
		},
		onLoad(opt){
			this.id = opt.id
			this.$appLogin(()=>{
				this.getInfo()
			})
		},
		methods: {
			invokeBtn () {
				this.$httpPost({
					url:'ipos/get_account_id',
					data:{
						type: this.cash_type
					}
				}).then((res)=>{
					// this.$navTo('/orders_history')
					if(!res.data.list || res.data.list.length <=0){ 
						return this.$refs.msg.open(this.$t('你还有没有account_id'))
					}
					this.account_list = res.data.list
					this.account_id = res.data.list[0]
					this.$refs.account.open(this.$t('选择账号'), (res) => {
						this.$navTo('/subscription',{
							account_id: this.account_id,
							id:this.id
						})
					},this.$t('选择账号'))
				})
				
			},
			changAcctive(account_id){
				this.account_id = account_id
				// console.log(account_id,this.account_id)
			},
			toZhaoGuUrl(){
				location.href = this.info.prospectus || 'https://www1.hkexnews.hk/app/sehk/2023/105464/documents/sehk23061201007.pdf'
			},
			getInfo(){
				this.$httpGet({
					url:'ipos/info',
					data:{
						id:this.id
					}
				}).then((res)=>{
					if(!res.data.info || res.data.info.is_404){
						uni.reLaunch({url:'/404'})
					}
					// console.log(this.$numConvert(10000),res.data.info.ExpIssuingQuantity)
					// res.data.info.ExpIssuingQuantity = this.$numConvert(res.data.info.ExpIssuingQuantity, uni.getLocale())
					// res.data.info.ExpOfferingSize = this.$numConvert(res.data.info.ExpOfferingSize, uni.getLocale())
					
					this.info = res.data.info
					// this.stepNum = this.info.StockStatus?parseInt(this.info.StockStatus):1
					this.is_to_be_list = this.info.status == "OPEN"?0:1
					
					this.stepNum = this.info.step||1
					this.rcf = parseFloat(((this.info.min_order_size * this.info.current_price_used_for_creditcheck) * 1.010085).toFixed(2))
					this.showNotice()
				})
				
			},
			showNotice(){
				if(!this.is_to_be_list && !this.$ZC('ipoDetailsNotice')){
					this.$nextTick(()=>{
						this.$refs.message.open(this.$t('new-certification.notice_msg'), (res) => {
							if(res == true){
								this.toZhaoGuUrl()
							}
						},this.$t('new-certification.notice'))	
					})
					this.$ZC('ipoDetailsNotice', 1, 600)
				}
			}
		}
	}
</script>

<style lang="scss">
	.pageone {
		padding: 0rpx 40rpx 140rpx 40rpx;
	}

	.tarbox {
		width: 100%;
		margin-top: 40rpx;
		margin-bottom: 40rpx;
		display: flex;
	}

	.stockname {
		color: #000000;
		font-size: 42rpx;
		margin-right: 10rpx;
		margin-left: 20rpx;
	}

	.stockcode {
		color: $font-color-one;
		font-size: 25rpx;
		margin-top: 18rpx;
	}

	.blueback {
		width: 42rpx;
		height: 42rpx;
		position: absolute;
		right: 30rpx;
		margin-top: 10rpx;
	}

	.issuename {
		font-size: 30rpx;
		color: $font-color-one;
	}

	.xiaomi {
		/* width: 25%; */
		font-size: 30rpx;
		color: $font-color-two;
		position: absolute;
		right: 40rpx;
	}

	.xiaomied {
		font-size: 30rpx;
		color: $font-color-two;
		position: absolute;
		right: 53%;
	}

	.infolist {
		display: flex;
	}

	.info {
		width: 50%;
		height: 75rpx;
		line-height: 75rpx;
	}

	.onestep {
		width: 50rpx;
		height: 50rpx;
		border-radius: 100%;
		border: solid 10rpx $main-color;
		background-color: #FFFFFF;
		color: $main-color;
		text-align: center;
		font-size: 30rpx;
		padding-top: 5rpx;
		/* margin-right: 50rpx; */
	}

	.hengxian {
		width: 100rpx;
		height: 10rpx;
		background-color: $main-color;
		margin-top: 30rpx;
		margin-left: -2rpx;
		margin-right: -2rpx;
	}

	.steplist {
		width: 100%;
		display: flex;
		margin: 0 auto;
		margin-top: 26rpx;
		padding: 0 30rpx;
		box-sizing: border-box;
		// justify-content: space-around;
		justify-content: space-between;

		.step-item{
			width: 25%;
			flex-grow: 1;
			display: flex;
			justify-content: center;
			position: relative;
			
			.steps {
				width: 44rpx;
				height: 44rpx;
				display: flex;
				flex-shrink: 0;
				border: solid 8rpx #cccccc;
				border-radius: 44rpx;
				justify-content: center;
				align-items: center;
				// 上下居中和左右居中
				color: #cccccc;
				background-color: #FFF;
				position: relative;
			}
		}
		.step-item:first-child{
			width: 15%;
			justify-content: flex-start;
		}
		.step-item:last-child{
			width: 15%;
			justify-content: flex-end;
		}

		.step-item::after {
			// 伪元素只显示，没有任何点击效果
			content: " ";
			display: block;
			position: absolute;
			top: 25rpx;
			width: 100%;
			height: 9rpx;
			background-color: #cccccc;
			z-index: -1;
		}
		
		.step-item.active{
			.steps {
				border: solid 8rpx $main-color;
				color: $main-color;
			}
			
			&::after {
				background-color: $main-color;
			}
		}

		// .steps:first-child {
		// 	margin-left: 0;
		// }

		// .steps:first-child::after {
		// 	width: 115rpx;
		// 	left: 0;
		// }

		// .steps:last-child {
		// 	margin-right: 0;
		// }

		// .steps:last-child::after {
		// 	width: 115rpx;
		// 	right: 0;
		// }

	}

	.wordlist {
		display: flex;
		margin: 0 auto;
		margin-bottom: 37rpx;
		justify-content: space-between;

		.words {
			width: 150rpx;
			text-align: center;
		}
	}


	.stepsoneword {
		font-size: 27rpx;
		color: $font-color-two;
		margin-top: 17rpx;
		white-space: nowrap;
	}

	.stepstwoword {
		font-size: 20rpx;
		color: $font-color-two;
		margin-top: 13rpx;
	}

	.stockinfolist {
		height: 80rpx;
		line-height: 80rpx;
	}

	.stockinfowordone {
		font-size: 30rpx;
		color: $font-color-one;
	}

	.stockinfowordtwo {
		font-size: 30rpx;
		color: $font-color-two;
		position: absolute;
		right: 40rpx;
	}

	.dianjichakan {
		font-size: 30rpx;
		color: $main-color;
		position: absolute;
		right: 40rpx;
	}

	.tip {
		font-size: 30rpx;
		color: $font-color-one;
		margin-top: 40rpx;
		margin-bottom: 15rpx;
	}

	.tipinfo {
		font-size: 27rpx;
		color: $font-color-one;
	}
	
	.message-box{
		width: 400rpx;
		.account-item{
			line-height: 80rpx;
			position: relative;
			text-align: center;
			&.acctive::before{
				content: '';
				display: block;
				position: absolute;
				left: 50rpx;
				top: 30rpx;
				width: 20rpx;
				height: 20rpx;
				border-radius: 10rpx;
				background-color: #0877C6;
				z-index: 1000;
			}
		}
		.account-item + .account-item{
			border-top: 1rpx solid #ccc;
		}
	}
</style>
